import { useEffect } from "react"
import { useDispatch,useSelector } from "react-redux"
import { Layout } from "antd"
import { getAuthorButtons } from "@/api/modules/login"
import { setAuthButtons } from "@/redux/modules/auth"
import { Outlet } from "react-router-dom"
import { updateCollapse } from "@/redux/modules/menu"
import LayoutMenu from "./components/Menu"
import LayoutHeader from "./components/Header"
import LayoutTabs from "./components/Tabs"
import "./index.less"
import LayoutFooter from "./components/Footer"
import { State } from "@/redux/interface"

const LayoutIndex = () => {
    const dispatch = useDispatch()
    const {isCollapse} = useSelector((state:State) => state.menu)

    const {Sider, Content} = Layout

    // 获取按钮权限列表
    const getAuthButtonsList = async () => {
        const { data } = await getAuthorButtons()
        dispatch(setAuthButtons(data))
    }

    // 监听窗口大小变化
    const listeningWindow = () => {
        window.onresize = () => {
            return (() => {
                let screenWidth = document.body.clientWidth;
                if(!isCollapse && screenWidth < 1200) {
                    dispatch(updateCollapse(true))
                }
                if(isCollapse && screenWidth > 1200) {
                    dispatch(updateCollapse(false))
                }
            })()
        }
    }

    useEffect(() => {
        listeningWindow();
    },[isCollapse])

    useEffect(() => {
        getAuthButtonsList()
    },[])

    return (
        <section className="container">
            <Sider trigger={null} collapsed={isCollapse} width={220} theme="dark">
                <LayoutMenu></LayoutMenu>
            </Sider>
            <Layout>
                <LayoutHeader></LayoutHeader>
                <LayoutTabs />
                <Content>
                    <div className="content">
                        <Outlet />
                    </div>
                </Content>
                <LayoutFooter />
            </Layout>
        </section>
    )
}

export default LayoutIndex